<div class="flex justify-start items-center">
    <div ngmButtonGroup displayDensity="cosy">
        <button mat-raised-button color="primary" displayDensity="cosy" (click)="addNew()">
            <mat-icon fontSet="material-icons-outlined" nxDensity="cosy">add</mat-icon>{{ 'PAC.ACTIONS.ADD' | translate: {Default: "Add"} }}
        </button>
    </div>
</div>

<ngm-table class="overflow-hidden rounded-lg mt-2"
    displayDensity="comfortable"
    paging
    [data]="listOfData"
    [columns]="[
        {
            name: 'name',
            caption: 'PAC.KEY_WORDS.NAME' | translate: {Default: 'Name'},
            cellTemplate: nameTempl
        },
        {
            name: 'value',
            caption: 'PAC.KEY_WORDS.VALUE' | translate: {Default: 'Value'},
            cellTemplate: valueTempl
        },
        {
            name: 'action',
            caption: 'PAC.KEY_WORDS.ACTION' | translate: { Default: 'Action' },
            cellTemplate: actionTempl,
            stickyEnd: true
        }
    ]"
></ngm-table>

<ng-template #nameTempl let-id="id" let-name="name">
  @if (!editCache[id]?.edit) {
    <span>{{ name }}</span>
  } @else {
    <ngm-input [(ngModel)]="editCache[id].data.name" class="mt-2"></ngm-input>
  }
</ng-template>

<ng-template #valueTempl let-id="id" let-value="value">
  @if (!editCache[id]?.edit) {
    <span>{{ value }}</span>
  } @else {
    <ngm-input [(ngModel)]="editCache[id].data.value" class="mt-2"></ngm-input>
  }
</ng-template>

<ng-template #actionTempl let-id="id">
    <div class="flex items-center gap-2">
      @if (editCache[id]?.edit) {
        <button mat-icon-button displayDensity="cosy" class="text-gray-500" (click)="saveEdit(id)">
            <div class="flex justify-center items-center">
                <mat-icon fontSet="material-icons-outlined">save</mat-icon>
            </div>
        </button>
      } @else {
        <button mat-icon-button displayDensity="cosy" class="text-gray-500" (click)="startEdit(id)">
            <div class="flex justify-center items-center">
                <mat-icon fontSet="material-icons-outlined">edit</mat-icon>
            </div>
        </button>
      }
        <mat-divider [vertical]="true" style="height: 20px;"></mat-divider>
      @if (editCache[id]?.edit) {
        <button mat-icon-button displayDensity="cosy" class="text-gray-500"
            (click)="cancelEdit(id)">
            <div class="flex justify-center items-center">
                <mat-icon fontSet="material-icons-outlined">undo</mat-icon>
            </div>
        </button>
      } @else {
        <button mat-icon-button displayDensity="cosy" ngmAppearance="danger" class="text-gray-500"
            (click)="deleteRow(id)">
            <div class="flex justify-center items-center">
                <mat-icon fontSet="material-icons-outlined">delete</mat-icon>
            </div>
        </button>
      }
    </div>
</ng-template>
